<!DOCTYPE html> 
 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>图片随机切换</title> 
    <style type="text/css">
      *{margin:0;padding:0;}
      #picBox{width:620px;height: 340px;box-shadow: 4px 4px 4px #999;}
      #picBox img{position: absolute;top: 0;left: 0;}
      #picBox p.show{opacity: 1;left: 0;}

      .pic1{z-index: 1;}
      .pic2{z-index: 2;}
      .pic3{z-index: 3;}
      .pic4{z-index: 4;}
    </style>
    <script language="javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">

    $(function(){
        var box = $('#picBox');
        var img = $('#picBox img');
        var flag1 = true;
        var flag2 = true;
        var offsetX = [-620,620];
        var offsetY = [-340,340];


        img.mouseover(function() {
          /* Act on the event */
          if(flag1 && flag2)
          {
            flag1 = false;
            flag2 = false;

            var rondNum = parseInt(Math.random() * 2)
            var tol = parseInt(Math.random() * 2)

            if(tol)
            {
                $(this).animate({'opacity': 0, 'left': offsetX[rondNum]}, 800, function() {
                   callBack($(this));
                })
            }
            else
            {
                $(this).animate({'opacity': 0, 'top': offsetY[rondNum]}, 800, function() {
                  callBack($(this));
              })
            }
          }
          
        });

        box.mouseleave(function() {
          /* Act on the event */
          flag1 = true;
        });
        


        function callBack(obj){

          flag2 = true;

          obj.css({
                'left': '0px',
                'top': '0px',
                'opacity' : 1,
                'z-index' : 1
              });

            $('img').not(obj).each(function() {
                $(this).css({
                   'z-index': parseInt($(this).css('z-index')) + 1
                 });
            });

        }


    })
    </script>
  </head> 
 
  <body>  
    <div id="picBox">
      <img class="pic1" src="images/pic1.jpg">
      <img class="pic2" src="images/pic2.jpg">
      <img class="pic3" src="images/pic3.jpg">
      <img class="pic4" src="images/pic4.jpg">
    </div>
  </body> 
</html>